<template>
  <div class="wrapper">
    <mt-header :fixed="false" :title="`${$route.query.payPassword=='1'?'设置':'修改'}支付密码`" mtClass="no-bg" rightIcon="icon-guanbi"/>
    <div class="blank">支付密码仅支持6位数字</div>
    <div v-if="$route.query.payPassword=='1'">
      <div class="list">
        <inputPayPwd @sendValueToParent="getPayPwdFromChild"></inputPayPwd>
        <inputPayPwd title="确定支付密码" @sendValueToParent="getPayPwdFromChildAgain"></inputPayPwd>
      </div>
      <div class="default-btn">
        <mt-button type="primary" size="large" :disabled="(inputValuePayPwd&&inputValuePayPwdAgain)?false:true" @click.native="editPayPwd">完成</mt-button>
      </div>
    </div>
    <div v-else>
      <div class="list">
        <inputPayPwd title="原支付密码" @sendValueToParent="getOldPwdPwdFromChild"></inputPayPwd>
        <inputPayPwd title="输入新支付密码" @sendValueToParent="getPayPwdFromChild"></inputPayPwd>
        <inputPayPwd title="重新输入新支付密码" @sendValueToParent="getPayPwdFromChildAgain"></inputPayPwd>
      </div>
      <div class="default-btn">
        <mt-button type="primary" size="large" :disabled="(inputValuePayPwd&&inputValuePayPwdAgain&&inputValueOldPayPwd)?false:true" @click.native="editPayPwd">完成</mt-button>
      </div>
      <div class="tips" @click="toFindPayPwd">忘记支付密码</div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import mtHeader from "@/components/Header"
import inputPayPwd from "@/components/InputPayPwd/index"
import { Toast } from 'mint-ui';
import { UpdateInfo } from '@/api/api'
export default {
  data() {
    return {
      inputValuePayPwd:'',
      inputValuePayPwdAgain:'',
      inputValueOldPayPwd:''
    }
  },
  components:{
    mtHeader,
    inputPayPwd
  },
  methods: {
    ...mapMutations('user', [
      'set_userInfo'
    ]),
    goback(){
      if( this.$route.query.from == 'usable' ){
        this.$router.push('/account/wallet/usable');
      }else{
        this.$router.back(-1)
      }
    },
    getOldPwdPwdFromChild(value){
      this.inputValueOldPayPwd = value;
    },
    getPayPwdFromChild(value){
      this.inputValuePayPwd = value;
    },
    getPayPwdFromChildAgain(value){
      this.inputValuePayPwdAgain = value;
    },
    editPayPwd(){
      if( this.inputValuePayPwdAgain == this.inputValuePayPwd ){
        var data = {}
        if( this.$route.query.payPassword=='1' ){
          // 未设置
          data = {
            "payPassword":this.inputValuePayPwd
          }
        }else{
          // 已设置
          data = {
            "payPasswordOld":this.inputValueOldPayPwd,
            "payPassword":this.inputValuePayPwd
          }
        }
        UpdateInfo(data).then(res => {
          if( res.code == 200 ){
            this.set_userInfo(res.data)
            Toast({
              message: "已设置",
              iconClass: 'icon iconfont icon-ic_check'
            })
            if( this.$route.query.from == 'Usable' ){
              this.$router.back(-1);
            }else{
              this.$router.push('/account/setting');
            }
          }else{
            Toast({
              message: res.msg,
              iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
            })
          }
        })
      }else{
        Toast({
          message: '两次输入密码不一致'
        });
      }
    },
    toFindPayPwd(){
      if( this.$route.query.loginPassword == '1' ){
        // 未设置登录密码，请先设置登录密码
        Toast({
            message: "请先设置登入密码",
            iconClass: 'icon iconfont icon-ic_check'
        })
      }else{
        this.$router.push({
          path:'/account/setting/editPayPwd/findPayPwd',
          query:{
            mobile:this.$route.query.mobile
          }
        });
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper{
  .blank{
    height:44px;
    background:rgba(242,243,249,1);
    font-size:13px;
    color:#bfbfbf;
    line-height 44px;
    text-align:center;
  }
  .list{
    color:#666666;
  }
  .tips{
    font-size:12px;
    color:#5F88FF;
  }
}
</style>
